import React, { useState } from 'react'
import Form, { Field } from '../../UI/form'
import { connect } from 'react-redux'
import Input from '../../UI/input/input'
import Button from '../../UI/Button/Button'
import Message from '../../UI/Message/Message'
import axios from '../../utils/axios/axios'
import './index.scss'
const nameRules = { required: true, message: '请输入姓名！' }
const passworRules = { required: true, message: '请输入密码！' }
function Login(props) {
  let [username, setusername] = useState('')
  let [password, setpassword] = useState('')

  const form = Form.useForm()
  const onFinish = (val) => {
    let url = 'http://81.70.38.110:3002/api/users/login'

    const data = {
      username: val.username,
      password: val.password
    }
    axios
      .post(url, data)
      .then((res) => {
        const { data } = res
        const payload = { id: data.id, name: data.username }
        props.login(payload)
        sessionStorage.setItem('id', data.id)
        sessionStorage.setItem('name', data.username)
        let urlForm = props.history.location.state
          ? props.history.location.state.form
          : '/'
        props.history.push(urlForm)
      })
      .catch((err) => {
        Message.error(err)
      })
  }
  const onFinishFailed = (val) => {
    for (let i = 0; i < val.length; i++) {
      for (let item in val[i]) {
        if (item === 'username') {
          setusername(val[i][item])
        } else if (item === 'password') {
          setpassword(val[i][item])
        }
      }
    }
  }
  const onSetNull = (set) => {
    if (set.name === 'username') {
      if (set.isAir === true) {
        setusername(nameRules.message)
      } else {
        setusername('')
      }
    } else if (set.name === 'password') {
      if (set.isAir === true) {
        setpassword(passworRules.message)
      } else {
        setpassword('')
      }
    }
  }
  return (
    <div className="login">
      <img className="logo" src={require('./../../image/home/register.png')} />
      <Form form={form} onFinish={onFinish} onFinishFailed={onFinishFailed}>
        <Field
          name="username"
          rules={[nameRules]}
          help={username}
          onsetAir={(set) => {
            onSetNull(set)
          }}
        >
          <Input lefttext="用户名：" placeholder="请输入用户名" clear="true" />
        </Field>
        <Field
          name="password"
          rules={[passworRules]}
          help={password}
          onsetAir={(set) => {
            onSetNull(set)
          }}
        >
          <Input
            lefttext="密 码："
            placeholder="请输入密码"
            type="password"
            clear="true"
          />
        </Field>
        <Button typed="primary">提交</Button>
      </Form>
    </div>
  )
}

const mapStateToProps = (state) => {
  return state
}
const mapDispatchToProps = (dispatch) => ({
  login: (payload) =>
    dispatch({
      type: 'LOGIN_SUCCESS',
      payload: payload
    })
})

export default connect(mapStateToProps, mapDispatchToProps)(Login)
